﻿(function () {
	window.initFirstPage = function (app, position, size) {
		var firstPage = new Kinetic.Layer();
		firstPage.add(createBackground(size));
		firstPage.add(createPlayButton(app));
		var stage = new Kinetic.Stage({
	        container: 'firstPage',
	        x: position.x,
	        y: position.y,
	        width: position.x + size.width,
	        height: position.y + size.height
	    });
	    stage.add(firstPage);
	    return stage;
	};
	function createBackground (size) {
		return new Kinetic.Rect({
			x: 0,
			y: 0,
			fill: 'lightgray',
			width: size.width,
			height: size.height,
		});
	}
	function createPlayButton (app) {
		var playButton = createButton(300, 300, 85, 40, 'Играть');
		playButton.on('click', function () { app.moveToTop('levelPage'); });
		return playButton;
	}

	function createButton (x, y, width, height, text) {
		var button = new Kinetic.Group();
		button.add(createRect(x, y, width, height));
		button.add(createText(x, y, 20, text));
		button.on('mouseover', function() {
			document.body.style.cursor = 'pointer';
		});
		button.on('mouseout', function() { document.body.style.cursor = 'default'; });
		return button;
	}
	function createRect (x, y, width, height) {
		return window.EngineWrapper.rect(x, y, width, height);
	}
	function createText (x, y, fontSize, text) {
		var el = new Kinetic.Text({
			x: x,
			y: y,
			text: text,
			fontSize: fontSize,
			fill: '#555',
			padding: 10,
			align: 'center'
		});
		return el;
	}
})();